<link href="{$base_dir}css/autocomplete.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="{$base_dir}modules/billing/js/AJAX_PaymentCommon.js"></script>
<script type="text/javascript" src="{$base_dir}modules/billing/js/AJAX_OutPayment.js"></script>

<script type="text/javascript">
{literal}
    $(document).ready(function(){
        activeMenu('2', '22');
        $('#quickSearch').unbind();
        var containers =   {
                   patientCode:    'patientCode',
                   patientName:    'personName',
                   ticketList:     'ticketLbx',
                   birthDay:       'dobText',
                   phoneNumber:    'phoneNumberText',
                   address:        'addressText',
                   mainContent:    'outPaymentContentDiv'
        };
        $('#quickSearch').keypress(function(e) {
	        if (e.which == 13){
	            e.stopPropagation();
	            fastSearchOutPatient(containers, 'patientSearchDialog1111');    
	        }
        });
        // Patient code 
	    $('#patientCode').unbind();
	    $('input#patientCode').keypress(function(e) {      
            if (e.which == 13){
                e.stopPropagation();
		        var searchString = $.trim($('#patientCode').val());
		        if (searchString.length > 0) {
			        resetOutPaymentForm();
			        var newStr = pad(searchString,-6,'0');
			        $('#patientCode').val(newStr);
			        var patientCode = $('#patientCode').val();
			        searchOutPatientByCode(patientCode, containers);
		        }
	        }                
	    });
	    
	    // Patient name
	    $('#patientName').unbind();
        $('input#personName').keypress(function(e) {      
            if (e.which == 13){
                e.stopPropagation();
                var searchString = $.trim($('#personName').val());
                resetOutPaymentForm();
                $('#personName').val(searchString);
                searchOutPatientByName(searchString, containers, 'patientSearchDialog1111');
            }                
        });

        $('input#patientCode').bind('keyup', function() {
	        var searchString = $.trim($('#patientCode').val());
	        if (searchString == '') {
	            resetOutPaymentForm();
	        }
	    });
	    
	    $('#ticketLbx').change(function() {
            if ($(this).val() == 0) {
                $('#outPaymentContentDiv').html('');
                return;
            }
            viewOutPaymentDetails($(this).val());
        });
        
        $('input#patientCode').focus();
    });
{/literal}
</script>
<div id="patientInfo">
    <div id="patientDetailsInfo" style='border: 1px solid #BBB; padding: 0px 0px; -moz-box-shadow:0 0 3px #AAA; -webkit-box-shadow:0 0 3px #AAA;'>
        <div class='field-row add-patient-row'>
            <div style="width: 90px;" class="field-label add-patient-label">{translate}Patient's ID{/translate}</div>
            <div style="width: 110px;" class="field-value add-patient-value">             
                <input type="text" style="width: 100px;" name="patient[patient_code]" maxlength="6" id="patientCode">&nbsp;
                <input type="hidden" name="patient[id]" id="patientIdHidden">
            </div>
            <div style="width: 90px;" class="field-label add-patient-label">{translate}Full name{/translate}</div>
            <div style="width: 190px;" class="field-value add-patient-value">
                <input type="text" style="width: 180px;" name="person[name]" id="personName">&nbsp;
            </div>
            <div style="width: 80px;" class="field-label add-patient-label">{translate}Date of birth{/translate}</div>
            <div style="width: 100px;" class="field-value add-patient-value"> 
                <span id="dobText"></span> &nbsp;               
            </div>
            <div  style="width: 70px; text-align: left" class="field-label add-patient-label">{translate}Service ticket_2{/translate}</div>
            <div class="field-value add-patient-value">
                <select id="ticketLbx" style="width: 180px;">
                </select>&nbsp;               
            </div>
            <div style='clear: both;'></div>
        </div>
        <div class='field-row add-patient-row'>            
            <div style="width: 90px;" class="field-label add-patient-label">Điện thoại</div>
            <div style="width: 110px;" class="field-value add-patient-value">
                    <span id="phoneNumberText"></span>&nbsp;
            </div>
            <div style="width: 90px;" class="field-label add-patient-label">Địa chỉ</div>
            <div class="field-value add-patient-value">
                   <span id="addressText"></span>&nbsp;                
            </div>            
            <div style="clear: both;"></div>
        </div>       
    </div>
</div>

<!-- Outpatient payment content -->
<div id="outPaymentContentDiv">
    
</div>
